<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset=utf-8 />
    <title>mapBox叠加点密度专题图</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 520px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
    <script type="text/javascript" src="../libs/SuperMap.Include.js"></script>
    <script type="text/javascript" src="js/iConnector/iConnectorLeaflet.js"></script>
    <script type="text/javascript">
        var map,canvasTiles,host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-world/rest/maps/World";
        function init(){
            if(!document.createElement('canvas').getContext) {
                alert('您的浏览器不支持 canvas，请升级');
                return;
            }
            L.mapbox.accessToken = 'pk.eyJ1IjoibGlxaXVwaW5nIiwiYSI6ImVhOGFmMGIzMzQ4MzliNTdhZTliZWI0NzdmMzljMzAyIn0.8IJbjs6mzxJxqnqLyjdC1g';
            map = L.mapbox.map('map','mapbox.streets')
                    .setView([10,100],2);

        }
        //生成点密度专题图
        function addThemeDotDensity()
        {
            canvasTiles&&map.removeLayer(canvasTiles);
            //创建制作点密度专题图服务类
            var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),
                    dotStyle = new SuperMap.REST.ServerStyle({
                        markerSize: 3,
                        markerSymbolID: 12
                    }),
                    themeDotDensity = new SuperMap.REST.ThemeDotDensity({
                        dotExpression: "Pop_1994",
                        value: 5000000,
                        style: dotStyle
                    }),
                    themeParameters = new SuperMap.REST.ThemeParameters({
                        themes: [themeDotDensity],
                        datasetNames: ["Countries"],
                        dataSourceNames: ["World"]
                    });
            //向iserver发送请求
            themeService.processAsync(themeParameters);
        }
        //生成专题图后将其叠加到 openstreetmap 地图上面
        function themeCompleted(themeEventArgs) {
            if(themeEventArgs.result.resourceInfo.id) {
                 canvasTiles =  SuperMap.Web.iConnector.Leaflet.getLayer(url,{layersID:themeEventArgs.result.resourceInfo.id});
                canvasTiles.addTo(map);
            }
        }
        function themeFailed(serviceFailedEventArgs) {
            alert(serviceFailedEventArgs.error.errorMsg);
        }
        function removeTheme(){
            map.removeLayer(canvasTiles);
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
<input type="button" class="btn" value="创建点密度专题图" onclick="addThemeDotDensity()" />
<input type="button" class="btn" value="移除点密度专题图" onclick="removeTheme()" />
    </div>
<div id="map"  style="width: 100%; height: 500px;"></div>
</body>
</html>